<template>
	<view>
		<view class="content">
			<ms-tabs :list="type" v-model="currentIndex" itemColor="#03A9F4" lineColor="#03A9F4" :lineAnimated="true"></ms-tabs>
		</view>
		<swiper :indicator-dots="true" :autoplay="false"  @change="swiperCut" :current="currentIndex" :duration="300">
			<swiper-item v-for="(item,index) in imgSwiper">
				<view class="swiper-item">
					<image :src="item" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import msTabs from '@/components/ms-tabs/ms-tabs.vue'
	export default {
		components: {msTabs},
		data() {
			return {
				type:[],
				imgSwiper:[
					'http://img.doutula.com/production/uploads/image/2020/03/31/20200331639026_ULKVDY.png',
					'http://img.doutula.com/production/uploads/image/2020/03/31/20200331639027_VNlDLO.png',
					'http://img.doutula.com/production/uploads/image/2020/03/31/20200331639027_ohlKyB.png',
					'http://img.doutula.com/production/uploads/image/2020/04/02/20200402804326_EZKeGh.jpg',
					'http://img.doutula.com/production/uploads/image/2020/04/02/20200402804325_EnjYLI.jpg',
					'http://img.doutula.com/production/uploads/image/2020/04/02/20200402804325_YwXhzi.jpg',
				],
				currentIndex:0
			}
		},
		onShow(){
			for(let i in this.imgSwiper){
				this.type=[...this.type,{title:'位置'+i}]
			}
		},
		methods: {
			swiperCut(e){
				this.currentIndex=e.detail.current
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #fff;
		margin-bottom: 20rpx;
		.title {
			margin-left: 20rpx;
			padding: 20rpx 0;
			color: #818586;
			border-bottom: 1px solid #f6f6f6;
		}
		.btn {
			background: $uni-color-primary;
			color: #fff;
			padding: 20rpx;
			display: inline-block;
			border-radius: 10rpx;
		}
	}
	.tab-block {
		background: $uni-color-primary;
		color: #fff;
		line-height: normal;
		padding: 5px;
		margin-bottom: 5px;
		border-radius: 5px;
	}

</style>
